<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-05-25 15:54:18
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-05-28 16:24:06
 -->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="字段属性" name="first">
        <el-form
          :model="currentFormItem"
          refs="formItemDetailForm"
          label-width="100px"
          size="mini"
          v-if="this.cLickData.item"
        >
          <el-form-item
            label="字段名称"
            prop="title"
            :rules="{ required: true, message: '请输入标题', trigger: 'blur' }"
          >
            <el-input v-model="currentFormItem.title"></el-input>
          </el-form-item>
          <el-form-item
            label="字段"
            prop="field"
            :rules="{ required: true, message: '请输入字段', trigger: 'blur' }"
          >
            <el-input v-model="currentFormItem.field"></el-input>
          </el-form-item>
          <el-form-item label="占位内容" prop="field">
            <el-input v-model="currentFormItem.props.placeholder"></el-input>
          </el-form-item>
          <el-form-item
            label="默认值"
            prop="field"
            v-if="
              [
                'input',
                'textarea',
                'number',
                'float',
                'description',
                'htmlarea'
              ].includes(currentFormItem.type)
            "
          >
            <el-input v-model="currentFormItem.value"></el-input>
          </el-form-item>
          <el-form-item label="是否搜索字段">
            <el-radio-group v-model="currentFormItem.isSearch">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否表格字段">
            <el-radio-group v-model="currentFormItem.isTable" value="true">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否必填">
            <el-radio-group v-model="currentFormItem.required">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否禁用">
            <el-radio-group v-model="currentFormItem.props.disabled">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="是否多选"
            v-if="['select'].includes(currentFormItem.type)"
          >
            <el-radio-group v-model="currentFormItem.props.multiple">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="输入长度"
            v-if="
              [
                'input',
                'textarea',
                'number',
                'float',
                'description',
                'htmlarea'
              ].includes(currentFormItem.type)
            "
            prop="length"
            :rules="[
              { max: 4, min: 1, message: '请输入1-4位数字', trigger: 'change' }
            ]"
          >
            <el-input
              type="number"
              v-model="currentFormItem.props.maxlength"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="提示信息"
            v-if="
              ['input', 'textarea', 'number', 'float'].includes(
                currentFormItem.type
              )
            "
            prop="tips"
            :rules="[
              {
                max: 50,
                min: 1,
                message: '请输入1-50位提示信息',
                trigger: 'change'
              }
            ]"
          >
            <el-input
              type="textarea"
              v-model="currentFormItem.tips"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="验证规则"
            v-if="
              ['input', 'textarea', 'number', 'float'].includes(
                currentFormItem.type
              )
            "
            prop="pattern"
            :rules="[
              {
                max: 50,
                min: 1,
                message: '请输入1-50位验证正则表达式',
                trigger: 'change'
              }
            ]"
          >
            <el-input
              type="textarea"
              v-model="currentFormItem.pattern"
              show-word-limit
            ></el-input>
          </el-form-item>
          <div v-if="['select'].includes(currentFormItem.type)">
            <span>数据源选择</span>
            <el-tabs v-model="seloption">
              <el-tab-pane label="静态数据" name="0">
                <el-table :data="selectOptionData">
                  <el-table-column label="label">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.label"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="value">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.value"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        @click="selectOptionDataDel(scope.row, scope.$index)"
                        type="text"
                        size="small"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <el-button @click="addSelectoption()" type="text" size="small"
                  >添加选项</el-button
                >
              </el-tab-pane>
              <el-tab-pane label="动态数据" name="1">
                <div>
                  <el-input placeholder="请输入接口url" v-model="selectSet.url">
                    <template slot="prepend"
                      >接口url</template
                    >
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="请输入value" v-model="selectSet.value">
                    <template slot="prepend"
                      >value</template
                    >
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="请输入label" v-model="selectSet.label">
                    <template slot="prepend"
                      >label</template
                    >
                  </el-input>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

          <el-form-item
            v-if="
              currentFormItem.type === 'checkbox' ||
                currentFormItem.type === 'radio'
            "
            label="枚举"
            prop="enumId"
            :rules="[
              { reqired: true, message: '请选择枚举', trigger: 'change' }
            ]"
          >
            <el-input
              type="textarea"
              v-model="currentFormItem.enumId"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="
              currentFormItem.type === 'DatePicker' ||
                currentFormItem.type === 'dateRange'
            "
            label="显示类型"
            prop="format"
          >
            <el-select
              v-model="currentFormItem.props.type"
              placeholder="请选择日期显示类型"
              allow-create
            >
              <el-option value="year" label="year" />
              <el-option value="month" label="month" />
              <el-option value="date" label="date" />
              <el-option value="dates" label="dates" />
              <el-option value="week" label="week" />
              <el-option value="datetime" label="datetime" />
              <el-option value="datetimerange" label="datetimerange" />
              <el-option value="daterange" label="daterange" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="currentFormItem.type === 'DatePicker'"
            label="日期格式"
            prop="format"
          >
            <el-select
              v-model="currentFormItem.props.format"
              placeholder="请选择日期格式"
              allow-create
            >
              <el-option value="yyyy-MM-dd" label="yyyy-MM-dd" />
              <el-option value="yyyy/MM/dd" label="yyyy/MM/dd" />
              <el-option
                value="yyyy-MM-dd HH:mm:ss"
                label="yyyy-MM-dd HH:mm:ss"
              />
              <el-option
                value="yyyy/MM/dd HH:mm:ss"
                label="yyyy/MM/dd HH:mm:ss"
              />
              <el-option value="yyyy-MM-dd HH:mm" label="yyyy-MM-dd HH:mm" />
              <el-option value="yyyy/MM/dd HH:mm" label="yyyy/MM/dd HH:mm" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="是否显示时长"
            v-if="currentFormItem.type === 'dateRange'"
          >
            <el-radio-group v-model="currentFormItem.showDuration">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="currentFormItem.type === 'description'"
            label="枚举"
            prop="landingPage"
          >
            <el-input v-model="currentFormItem.landingPage"></el-input>
          </el-form-item>
          <el-form-item
            v-if="currentFormItem.type === 'join'"
            label="关联表单"
            prop="joinId"
          >
            <el-input v-model="currentFormItem.joinId"></el-input>
          </el-form-item>
          <el-form-item
            v-if="currentFormItem.type === 'region'"
            label="行政区划级别"
            prop="regionLevel"
          >
            <el-select
              v-model="currentFormItem.regionLevel"
              placeholder="请选择行政区划级别"
            >
              <el-option value="1" label="省、直辖市、自治区" />
              <el-option value="2" label="市、州" />
              <el-option value="3" label="区、县" />
              <el-option value="4" label="乡镇、街道" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="currentFormItem.type === 'score'"
            label="评分类型"
            prop="scoreType"
          >
            <el-select
              v-model="currentFormItem.scoreType"
              placeholder="请选择行政区划级别"
            >
              <el-option value="1" label="10分制" />
              <el-option value="2" label="5分制" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="currentFormItem.type === 'upload'"
            label="上传地址"
            prop="title"
            :rules="{
              required: true,
              message: '请输入上传地址',
              trigger: 'blur'
            }"
          >
            <el-input v-model="currentFormItem.props.action"></el-input>
          </el-form-item>
          <el-form-item
            v-if="currentFormItem.type === 'upload'"
            label="上传类型"
            prop="format"
          >
            <el-select
              v-model="currentFormItem.props.uploadType"
              @change="changeFile"
              placeholder="请选择上传类型"
              allow-create
            >
              <el-option value="image" label="图片上传" />
              <el-option value="file" label="文件上传" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="currentFormItem.type === 'rate'"
            label="最大值"
            prop="format"
          >
            <el-input-number
              v-model="currentFormItem.props.max"
              :min="1"
              label="评分最大值"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="允许半选"
          v-if="currentFormItem.type == 'rate'"
          >
            <el-radio-group
              v-model="currentFormItem.props.allowHalf"
              value="true"
            >
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="表单属性" name="second">配置管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    cLickData: {}
  },
  data() {
    return {
      activeName: 'first',
      seloption: '0',
      currentFormItem: {
        isSearch: false,
        isTable: false,
        required: false,
        props: {},
        options: []
      },
      selectOptionData: [],
      selectSet: {}
    }
  },
  watch: {
    // 监听中间控制点击的选项
    cLickData(value) {
      if (value.item) {
        this.currentFormItem = Object.assign(
          JSON.parse(JSON.stringify(this.currentFormItem)),
          JSON.parse(JSON.stringify(this.cLickData.item))
        )
        this.currentFormItem.props.disabled = false
        console.log(this.currentFormItem)

        if (this.cLickData.item.type === 'select') {
          if (this.cLickData.item.selectSet) {
            this.selectSet = JSON.parse(
              JSON.stringify(this.cLickData.item.selectSet)
            )
            if (this.selectSet.url) {
              this.seloption = '1'
            }
          } else {
            this.selectSet = {}
            this.selectOptionData = JSON.parse(
              JSON.stringify(this.cLickData.item.options)
            )
            this.seloption = '0'
          }
        }
      }
    },
    // 监听公共配置项更改
    currentFormItem: {
      handler: function(newValue, oldValue) {
        console.log(newValue)
        /*    newValue.props.placeholder = newValue.props.placeholder
          ? newValue.props.placeholder
          : '请输入' + newValue.title */
        if (newValue.validate) {
          newValue.validate[0] = {
            required: newValue.required,
            message: newValue.tips || '请输入' + newValue.title,
            trigger: 'blur'
          }
          if (newValue.pattern) {
            newValue.validate[0].pattern = newValue.pattern
          } else {
            delete newValue.validate[0].pattern
          }
        }

        this.$emit('change', newValue)
      },
      deep: true
    },
    // 监听下拉自定义数据操作
    selectOptionData: {
      handler: function(newValue, oldValue) {
        this.currentFormItem.options = newValue
        this.$emit('change', this.currentFormItem)
      },
      deep: true
    },
    // 监听下拉数据源选项
    selectSet: {
      handler: function(newValue, oldValue) {
        if (this.seloption === '1') {
          this.currentFormItem.selectSet = newValue
          this.currentFormItem.options = []
          this.$emit('change', this.currentFormItem)
        }
      },
      deep: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 下拉添加自定义选项
    addSelectoption() {
      this.selectOptionData.push({
        label: '',
        value: ''
      })
    },
    // 下拉删除自定义选项
    selectOptionDataDel(item, index) {
      console.log(index)
      this.selectOptionData.splice(index, 1)
    },
    // 文件类型更改
    changeFile(e) {
      this.currentFormItem.props.accept = e === 'image' ? 'image/*' : ''
      this.currentFormItem.props.listType = e === 'image' ? 'picture' : 'text'
    }
  }
}
</script>

<style lang="stylus" scoped>
>>> .el-table {
  min-height: 0;
}

>>> .el-table--enable-row-transition .el-table__body td {
  padding: 0;
}

>>> .el-table th {
  padding: 0;
}
</style>
